<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表渲染</title>
    </head>
    <body>
        <script src="../libs/vue.js" charset="utf-8"></script>
        <div id="example"></div>
        <script>

            var elem = document.getElementById('example')
            for (var i = 0; i < 100000; i++) {
                elem.appendChild(document.createElement("my-component"));
            }

            var p_time = new Date().getTime();

            // 注册
            Vue.component('my-component', {template: '<li>A custom component!</li>'})

            // 创建根实例
            new Vue({el: '#example'})

            var n_time = new Date().getTime();
            console.log(n_time - p_time);

        </script>

        <!-- <div id="example">
            <div v-for="n in 100000">{{ text }}</div>
        </div>
        <script>
            var vdata = {
                elem: "123",
                num: 3123
            }

            // var elem = document.getElementById('example') for (var i = 0; i < 100000; i++) {     elem.appendChild(document.createElement("my-component")); }
            var p_time = new Date().getTime();
            // 创建根实例
            new Vue({
                el: '#example',
                data: {
                    text: '<div class="' + vdata.elem + '">' + vdata.num + '</div>'
                }
            })
            var n_time = new Date().getTime();
            console.log(n_time - p_time);
        </script> -->

    </script>

</body>
</html>
